<template>
	<view class="ranking-container">


	<view class="banner">
		<image src="/static/bg.png" mode="widthFix"></image>
	</view>
	<view class="main">

		<view class="tabs">
			<view class="tab">
				<view class="label">
					{{ $t("今日收益") }}
					<image class="sort" src="/static/imgs/rankingList/sort-act1.png" mode="widthFix">
					</image>
				</view>
				<view style="color: #333; font-weight: 600;">{{ today }} USDT</view>
			</view>
			<view class="tab">
				<view class="label">
					{{ $t("累计收益") }}
					<image class="sort" src="/static/imgs/rankingList/sort-act1.png" mode="widthFix">
					</image>
				</view>
				<view style="color: #333; font-weight: 600;">{{ total }} USDT</view>
			</view>
		</view>


		<view class="lsit">
			<view class="item header">
				<view class="label sort">{{ $t("排名") }}</view>
				<view class="label name">{{ $t("用户") }}</view>
				<view class="label num">{{ $t("累计收益") }}</view>
			</view>
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="label sort">
					<template v-if="index < 3">
						<image v-if="index == 0" src="/static/imgs/rankingList/first.png" mode="widthFix"></image>
						<image v-if="index == 1" src="/static/imgs/rankingList/second.png" mode="widthFix"></image>
						<image v-if="index == 2" src="/static/imgs/rankingList/third.png" mode="widthFix"></image>
					</template>
					<template v-else>
						{{ item.rank }}
					</template>
				</view>
				<view class="label name">{{ item.userName.replace(/^(\S{3})\S+(\S{3})$/, "$1…$2") }}</view>
				<view class="label num">{{ item.amount }} USDT</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				list: [],
				today: 0,
				total: 0,
			};
		},
		methods: {
			getRankInfo() {
				this.$http
					.post(`/front/user/rank`)
					.then((res) => {
						console.log(res, "rank");

						if (res.code === 0) {
							this.list = res.obj.list;
							this.today = res.obj.today;
							this.total = res.obj.total;
						}
					})
					.catch((err) => {
						console.error(err);
					});
			},
		},

		onLoad() {},
		onShow() {
			this.getRankInfo();
			this.switchTabLang();
		},
	};
</script>

<style lang="scss" scoped>
	.ranking-container {
		width: 100%;
		height: 100%;
		background: url("../../static/imgs/bg.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		position: fixed;

		.banner {
			width: 100%;
			height: 400rpx;
			image {
				width: 100%;
			}
		}

		.main {
			position: relative;
			// width: 100%;
			height: 64vh;
			margin-top: -30rpx;
			padding: 0 30rpx;

			border-radius: 30rpx 30rpx 0rpx 0rpx;

			.tabs {
				width: 690rpx;
				display: flex;
				align-items: center;
				width: 100%;
				height: 100rpx;
				padding: 35rpx 0;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 10rpx 0px rgba(29, 70, 117, 0.1);
				border-radius: 20rpx;

				.tab {
					flex: 1;
					text-align: center;
					font-family: PingFang SC;
					font-size: $uni-font-size-30;
					font-family: PingFang SC;
					font-weight: 400;
					color: #1cd1ba;

					&:first-child {
						border-right: 2rpx solid #e4e4e4;
					}

					.label {
						color: #333;
						margin-bottom: 20rpx;
					}

					.activeTab {
						font-size: $uni-font-size-34;
						font-weight: 500;
						color: $uni-text-color-fff;
					}

					.sort {
						width: 23rpx;
						height: 28rpx;
						margin-left: 8rpx;
						vertical-align: middle;
					}
				}
			}

			.lsit {
				width: 690rpx;
				padding: 30rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				border-radius: 16px;
				margin-top: 30rpx;
				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 60rpx;
					margin-bottom: 12rpx;
					font-size: $uni-font-size-30;
					font-family: PingFang SC;
					font-weight: 300;
					color: #000000;

					.label {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						image {
							width: 42rpx;
							height: 58rpx;
						}
					}

					.sort {
						width: 80rpx;
						text-align: center;
					}

					.name {
						width: 200rpx;
						color: #333;
					}

					.num {
						text-align: right;
						width: 240rpx;
						color: #333;
					}
				}

				.header {
					color: #999999;
				}
			}
		}
	}
</style>
